<template>
	<view class="box">
		<u-tabs :list="areaDict" lineWidth="30" lineColor="#1677ff" :scrollable="false" @change="changeTab"></u-tabs>
		<view class="detail">
			<view>
				<!-- 头部 -->
				<view @click="detailClick">
					<!-- 标题 -->
					<view>
						<view>{{areaData.name}}特色</view>
						<view>
							<u-icon name="arrow-right" color="#111" size="16">
							</u-icon>
						</view>
					</view>
					<view>
						<image v-for="item of areaData.images" :src="item.path" :key="item.id"></image>
					</view>
				</view>
				<!-- 推荐文献 -->
				<view>
					<view class="area_title">{{areaData.name}}文献</view>
					<LiteratureList :literatureData="literatureData"></LiteratureList>
				</view>
				<!-- 推荐文章 -->
				<view>
					<view class="area_title">{{areaData.name}}美文</view>
					<ArticleList :articleData="articleData"></ArticleList>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		areaArticle,
		areaDetail,
		areaLiterature,
		dictArea
	} from '../../api/api';
	import LiteratureList from "@/components/LiteratureList.vue";
	import ArticleList from "@/components/ArticleList.vue";
	import {
		uniNavigateTo
	} from '../../util';
	export default {
		components: {
			LiteratureList,
			ArticleList
		},
		data() {
			return {
				areaDict: [],
				currentDict: {},
				areaData: {},
				literatureData: [],
				articleData: []
			};
		},
		watch: {
			currentDict() {
				this.getData();
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			uni.showLoading({
				mask: true,
				title: "加载中"
			});
			this.getData('isPull');
		},
		// 页面加载时
		onShow() {
			dictArea().then(r => {
				this.areaDict = r.data.map(v => {
					return {
						name: v.name,
						id: v.id
					}
				});
				this.currentDict = this.areaDict[0];
			})
		},
		methods: {
			changeTab(v) {
				this.currentDict = v;
			},
			async getData(type = '') {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				const areaR = await areaDetail(this.currentDict.id);
				this.areaData = {
					...areaR.data,
					images: areaR.data.images.slice(0, 3)
				}
				const literatureR = await areaLiterature(this.currentDict.id);
				this.literatureData = literatureR.data;
				const articleR = await areaArticle(this.currentDict.id);
				this.articleData = articleR.data;
				uni.hideLoading();
				if (type === 'isPull') {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: "刷新成功"
					})
				}
			},
			// 详情跳转
			detailClick() {
				uniNavigateTo(`/pages/area/areaDetail?id=${this.currentDict.id}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;

		.detail {
			padding: 0 30rpx;

			>view:first-of-type {
				width: 100%;
				margin-top: 20rpx;

				>view:first-of-type {
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #ccc;
					width: 100%;

					>view:first-of-type {
						display: flex;
						align-items: center;
						justify-content: space-between;

						>view:first-of-type {
							color: #000;
							font-size: 36rpx;
							font-weight: 900;
						}

						>view:last-of-type {}
					}

					>view:nth-of-type(2) {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 10rpx;

						>image {
							width: 31%;
							display: block;
							height: 80rpx;
							margin-right: 30rpx;

							&:last-of-type {
								margin-right: 0rpx;
							}
						}
					}
				}

				>view:nth-of-type(2) {
					margin-top: 20rpx;
				}

				>view:nth-of-type(3) {
					margin-top: 20rpx;

					>view:first-of-type {
						margin-bottom: 20rpx;
					}
				}
			}
		}

		.area_title {
			font-size: 26rpx;
			font-weight: 900;
			padding-left: 20rpx;
			line-height: 26rpx;
			border-left: 10rpx solid #1677ff;
		}
	}
</style>
